<template>
    <div class="auth-page">
        <div class="auth-background"></div>
        <a-row class="auth-container" justify="center" align="middle">
            <!-- 登录模块 -->
            <a-col :span="8" v-if="currentForm === 'login'">
                <a-card title="登录" bordered={false} class="auth-card">
                    <a-form layout="vertical" @submit.prevent="handleLoginSubmit">
                        <a-form-item label="手机号">
                            <a-input v-model:value="loginForm.phoneNumber" placeholder="请输入手机号" />
                        </a-form-item>
                        <a-form-item label="密码">
                            <a-input-password v-model:value="loginForm.password" placeholder="请输入密码" />
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" html-type="submit" block>登录</a-button>
                        </a-form-item>
                        <div class="auth-links">
                            <a @click="switchForm('forgot')">忘记密码？</a>
                            <a @click="switchForm('register')">没有账号？注册</a>
                        </div>
                    </a-form>
                </a-card>
            </a-col>
            <!-- 注册模块 -->
            <a-col :span="8" v-if="currentForm === 'register'">
                <a-card title="注册" bordered={false} class="auth-card">
                    <a-form layout="vertical" @submit.prevent="handleRegisterSubmit">
                        <a-form-item label="手机号">
                            <a-input v-model:value="registerForm.phoneNumber" placeholder="请输入手机号" />
                        </a-form-item>
                        <a-form-item label="验证码">
                            <a-input-group compact style="display: flex; align-items: center;">
                                <a-input v-model:value="registerForm.code" placeholder="请输入验证码" style="flex: 1;" />
                                <a-button @click="sendCaptcha" style="width: 30%; margin-left: 10px;"
                                    :disabled="countdown > 0">
                                    {{ countdown > 0 ? `${countdown}s` : '验证码' }}
                                </a-button>
                            </a-input-group>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" html-type="submit" block>注册</a-button>
                        </a-form-item>
                        <div class="auth-links">
                            <a @click="switchForm('login')">已有账号？登录</a>
                        </div>
                    </a-form>
                </a-card>
            </a-col>

            <!-- 忘记密码模块 -->
            <a-col :span="8" v-if="currentForm === 'forgot'">
                <a-card title="验证码登录" bordered={false} class="auth-card">
                    <a-form layout="vertical" @submit.prevent="handleForgotPasswordSubmit">
                        <a-form-item label="手机号">
                            <a-input v-model:value="forgotPasswordForm.phoneNumber" placeholder="请输入手机号" />
                        </a-form-item>
                        <a-form-item label="验证码">
                            <a-input-group compact style="display: flex; align-items: center;">
                                <a-input v-model:value="forgotPasswordForm.code" placeholder="请输入验证码"
                                    style="flex: 1;" />
                                <a-button @click="sendForgotPasswordCaptcha" style="width: 30%; margin-left: 10px;"
                                    :disabled="countdown > 0">
                                    {{ countdown > 0 ? `${countdown}s` : '验证码' }}
                                </a-button>
                            </a-input-group>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" html-type="submit" block :loading="loading">验证码登录</a-button>
                        </a-form-item>
                        <div class="auth-links">
                            <a @click="switchForm('login')">返回登录</a>
                        </div>
                    </a-form>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import { useRouter } from 'vue-router';

import { notification } from 'ant-design-vue'; // 导入通知组件
import { userLogin, userRegister, codeSend } from '@/api/user';
import { UserTokenStore } from '@/stores/userToken';
const currentForm = ref('login');
const loginForm = ref({ phoneNumber: '', password: '', code: '' });
const registerForm = ref({ phoneNumber: '', code: '' });
const forgotPasswordForm = ref({ phoneNumber: '', password: '', code: '' });
const loading = ref(false);
const countdown = ref(0);
// 切换表单
const switchForm = (formType) => {
    currentForm.value = formType;
};
const userToken = UserTokenStore();
const router = useRouter();
// 登录提交
const handleLoginSubmit = async () => {
    loading.value = true;
    let res = await userLogin(loginForm.value)
    if (res.code != 200) {
        notification.error({
            message: res.message,
            description: res.data,
        });
    } else {
        notification.success({
            message: '成功',
            description: '用户登录成功，等待跳转首页。',
        });
        userToken.setToken(res.data)
        router.push('/')
    }
    loading.value = false;
};
// 注册提交
const handleRegisterSubmit = async () => {
    loading.value = true;
    let res = await userRegister(registerForm.value)
    if (res.code != 200) {
        notification.error({
            message: res.message,
            description: res.data,
        });
    } else {
        notification.success({
            message: '注册成功',
            description: '注册表单提交成功!',
        });
        userToken.setToken(res.data)
        router.push('/')
    }
};

// 验证码登录提交
const handleForgotPasswordSubmit = async () => {
    loading.value = true;
    let res = await userLogin(forgotPasswordForm.value)
    if (res.code != 200) {
        notification.error({
            message: res.message,
            description: res.data,
        });
    } else {
        notification.success({
            message: '成功',
            description: '用户登录成功，等待跳转首页。',
        });
        userToken.setToken(res.data)
        router.push('/')
    }
    loading.value = false;
};
// 发送验证码
const sendCaptcha = async () => {
    let phoneNumber = registerForm.value.phoneNumber;
    console.log("输出手机信息");
    console.log(phoneNumber);

    let res = await codeSend(phoneNumber);
    if (res.code != 200) {
        notification.error({
            message: res.message,
            description: res.data,
        });
    } else {
        // 重置倒计时
        countdown.value = 60;
        notification.info({
            message: '验证码已发送',
            description: '没钱！ 验证码 = ' + res.data,
            // description: '验证码已发送到您的手机!',
        });

        // 启动倒计时
        const timer = setInterval(() => {
            countdown.value -= 1;
            if (countdown.value <= 0) {
                clearInterval(timer);
            }
        }, 1000);
    }
};

// 发送忘记密码验证码
const sendForgotPasswordCaptcha = async () => {
    let phoneNumber = forgotPasswordForm.value.phoneNumber;
    console.log("输出手机信息");
    console.log(phoneNumber);

    let res = await codeSend(phoneNumber);
    if (res.code != 200) {
        notification.error({
            message: res.message,
            description: res.data,
        });
    } else {
        // 重置倒计时
        countdown.value = 60;
        notification.info({
            message: '验证码已发送',
            description: '没钱！ 验证码 = ' + res.data,
            // description: '验证码已发送到您的手机!',
        });

        // 启动倒计时
        const timer = setInterval(() => {
            countdown.value -= 1;
            if (countdown.value <= 0) {
                clearInterval(timer);
            }
        }, 1000);
    }
};

</script>

<style scoped>
.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.auth-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://124.71.148.150:9001/api/v1/buckets/cdatguiguts/objects/download?preview=true&prefix=fee80f9084444c44b847622e1ba5760e&version_id=null');
    background-size: cover;
    background-position: center;
    filter: brightness(50%) blur(8px);
    z-index: -1;
}

.auth-container {
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
}

.auth-card {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    animation: fadeIn 0.5s ease;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    color: #1890ff;
    cursor: pointer;
}

.auth-links a:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

a-form-item {
    margin-bottom: 16px;
}

a-button {
    transition: background-color 0.3s;
}

a-button:hover {
    background-color: #40a9ff;
}

a-button[disabled] {
    background-color: #d9d9d9;
}

@media (max-width: 768px) {
    .auth-container {
        padding: 10px;
    }

    .auth-card {
        padding: 15px;
    }

    .auth-links {
        flex-direction: column;
        align-items: center;
    }

    .auth-links a {
        margin-top: 8px;
    }
}
</style>
